<template>
  <a-carousel arrows autoplay :dots="true" effect="fade" class="h-full w-full">
    <template #prevArrow>
      <div class="custom-slick-arrow z-0" style="left: 10px">
        <left-circle-outlined />
      </div>
    </template>
    <template #nextArrow>
      <div class="custom-slick-arrow" style="right: 10px">
        <right-circle-outlined />
      </div>
    </template>
    <div v-for="(item, index) in swippers" :key="index" class="relative">
      <div class="relativdive">
        <!-- 如果轮播图有关联文章：则可点击查看文章详情，鼠标变为小手指；否则正常显示 -->
        <img
          class="swipper-img"
          v-if="item.articleid != null && item.articleid != undefined && item.articleid != ''"
          style="cursor: pointer"
          :src="getImageFileUrlPrefix + item.fid"
          @click="onSwipperImageClick(item.iscategory, item.articleid)"
        />
        <img class="swipper-img" v-else :src="getImageFileUrlPrefix + item.fid" />
        <h3 class="absolute z-10 left-2 inset-y-34 h-10">{{ item.title }}</h3>
        <div
          style="background-color: rgb(203, 201, 201); opacity: 0.4"
          class="absolute z-10 inset-x-0.15 inset-y-68 h-8"
        ></div>
      </div>
    </div>
  </a-carousel>
</template>
<script lang="ts">
  import { defineComponent, ref, reactive } from 'vue';
  import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue';

  import { useGlobSetting } from '/@/hooks/setting';
  import { getImageFileApi } from '/@/api/platform/file';

  import { useGo } from '/@/hooks/web/usePage';
  import { useCmsStore } from '/@/store/modules/cms';
  import { useRouter } from 'vue-router';

  import { getArticle, viewArticle } from '/@/api/cms/article';
  import { getCategory } from '/@/api/cms/category';

  export default defineComponent({
    name: 'CmsCategorySwipperComponent',
    props: {
      swippers: {},
    },
    components: {
      LeftCircleOutlined,
      RightCircleOutlined,
    },
    setup(props, context) {
      console.log('get props swippers', props.swippers);

      const { apiUrl } = useGlobSetting();
      const go = useGo();
      //使用store必须在setup中，否则会报错
      const cmsStore = useCmsStore();
      const router = useRouter();

      const getImageFileUrlPrefix = ref<string>(apiUrl + getImageFileApi);

      /**
       * 点击轮播图跳转文章详情或者指定栏目
       * 若iscategory为false则articleid为文章id，跳转文章详情，根据文章内容类型进行不同处理：
       *    文章类型为超链接时打开新窗口，为其他类型时跳转至文章查看页面
       * 若iscategory为true则articleid为栏目id,跳转指定栏目
       * @param iscategory 是否跳转指定栏目
       * @param articleid 文章ID或者栏目ID
       */
      function onSwipperImageClick(iscategory, articleid) {
        console.log('onSwipperImageClick', articleid);
        if (!!articleid && articleid > 0x0) {
          if (iscategory) {
            // 跳转指定栏目
            console.log('跳转指定栏目，栏目ID：', articleid);

            //根据栏目id获取栏目，判断栏目内容
            getCategory(articleid)
              .then((res) => {
                // console.log('指定栏目', res);

                //如果栏目没有内容或内容为空，根据栏目ID进行跳转到栏目查看的路由
                //如果栏目内容不为空，判断为url或路由；如果以http或https开头表示为外部地址，
                //    使用新窗口打开；否则在当前窗口中进行路由跳转
                let categoryContent = res.content;
                if (!categoryContent || Object.keys(categoryContent).length == 0) {
                  //使用store存储跳转路由需传递的数据
                  cmsStore.setCmsRouteParam({
                    isArticle: false,
                    id: articleid,
                  });

                  //把首页也当做1个栏目，均使用栏目页面进行展示
                  //后台可以在栏目中设置信息，前端根据设置信息显示
                  //设置信息包含:每个栏目：是否在父栏目中列出文章、在父栏目中是显示文章列表还是显示文章提要、在父栏目中的显示顺序、在父栏目中的显示宽度n/24
                  go('/cms/category/' + articleid);
                } else {
                  let httpPrefixIndex = categoryContent.indexOf('http');
                  if (httpPrefixIndex > -1) {
                    //打开外部链接，链接地址为栏目的content
                    // window.open('https://www.baidu.com/s?wd=' + clickCategory.id);`
                    window.open(categoryContent);
                  } else {
                    //使用content作为路由进行跳转
                    go(categoryContent);
                  }
                }
              })
              .catch((ex) => {
                console.log('catch ', ex);
              });
          } else {
            // 跳转文章详情
            console.log('跳转文章详情，文章ID：', articleid);

            // 根据文章id=获取文章详情，获取文章的内容类型
            getArticle({ id: articleid }).then((res) => {
              console.log('viewArticleDetail res', res);
              if (res.ctype === 3 || res.ctype === '3') {
                //文章内容类型为超链接，打开新窗口
                viewArticle({ id: articleid }).then((res) => {
                  window.open(res.content);
                });
              } else {
                //使用store存储跳转路由需传递的数据
                // cmsStore.setCmsRouteParam({
                //   isArticle: true,
                //   id: articleid,
                //   // data: article,
                // });
                // go('/cms/article/' + articleid);

                //打开一个新的浏览器窗口
                const url = router.resolve({
                  path: '/cms/article/' + articleid,
                });
                window.open(url.href);
              }
            });
          }
        }
      }

      // const swippers = reactive([
      //   {
      //     cid: 1,
      //     path: '@/../../images/swippers/1.jpg',
      //     title: '显示轮播图标题1',
      //   },
      //   {
      //     cid: 2,
      //     path: '@/../../images/swippers/2.jpg',
      //     title: '显示轮播图标题2',
      //   },
      //   {
      //     cid: 3,
      //     path: '@/../../images/swippers/3.jpg',
      //     title: '显示轮播图标题3',
      //   },
      // ]);
      return {
        getImageFileUrlPrefix,
        onSwipperImageClick,
      };
    },
  });
</script>
<style scoped lang="less">
  /* 轮播图的图片的高度为轮播区域高度(20rem)减去上下的边距(合计1rem) */
  @swipper-img-height: 20rem-1rem;

  .ant-carousel :deep(.slick-slide) {
    display: flex;
    justify-content: center;
    text-align: center;
    height: @swipper-img-height;
    line-height: @swipper-img-height;
    background: #364d79;
    overflow: hidden;
  }

  .ant-carousel :deep(.slick-arrow.custom-slick-arrow) {
    width: 25px;
    height: 25px;
    font-size: 25px;
    color: #fff;
    background-color: rgba(31, 45, 61, 0.11);
    opacity: 0.4;
    z-index: 1;
  }
  .ant-carousel :deep(.custom-slick-arrow:before) {
    display: none;
  }
  .ant-carousel :deep(.custom-slick-arrow:hover) {
    opacity: 0.8;
  }

  .ant-carousel :deep(.slick-slide h3) {
    color: #fff;
  }

  //轮播图缩放样式
  .relative {
    width: 100%;
    height: 100%;
  }
  .relativdive {
    width: 100%;
    height: 100%;
  }
  .swipper-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* 以下为走马灯的指示点样式 */
  //指示点的宽度
  .ant-carousel :deep(.slick-dots li.slick-active) {
    width: 16px;
  }
  //指示点的颜色、高度、内容文字显示
  .ant-carousel :deep(.slick-dots li button) {
    background-color: rgb(208, 18, 32);
    height: 15px;
    color: white;
    font-size: 10px;
    line-height: 13px;
  }
  //指示点的位置
  .ant-carousel :deep(.slick-dots-bottom) {
    bottom: 6px;
    justify-content: flex-end;
    margin-right: 0%;
  }
  //指示点之间的间隙
  .ant-carousel :deep(.slick-dots li) {
    margin-right: 1px;
    margin-left: 0px;
  }
</style>
